<template>
  <section class="f-shop-add w-card">
    <div class="title-box">
      <span class="title-text">{{ isEdit? '编辑': '新增'}}商户</span>
      <div v-if="!isEdit">
        <el-button type="primary" @click="submitHandle('add')">确定创建商户</el-button>
      </div>
      <div v-else>
        <el-button @click="cancelEdit()">取消编辑</el-button>
        <el-button type="primary" @click="submitHandle('modify')">确定重新发布商户</el-button>
      </div>
    </div>

    <section class="f-content">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <div class="f-title">基础信息</div>
        <el-row class="f-mt-20">
          <el-col :span="5">
            <el-form-item label="商户名称:" prop="shopName">
              <el-input v-model="ruleForm.shopName" placeholder="请输入商户名称" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="商户联系人姓名:" prop="shopUserName">
              <el-input v-model="ruleForm.shopUserName" placeholder="请输入商户联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="商户联系人号码:" prop="shopUserPhone">
              <el-input v-model="ruleForm.shopUserPhone" type="number" placeholder="请输入商户联系人号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt-20">
          <el-col :span="5">
            <el-form-item label="登录姓名:" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入登录姓名" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="登录号码:" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入登录号码" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5" v-if="!isEdit">
            <el-form-item label="登录密码:" prop="firstPassword">
              <el-input v-model="ruleForm.firstPassword" placeholder="请输入登录密码" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5" v-if="!isEdit">
            <el-form-item label="确认密码:" prop="secondPassword">
              <el-input v-model="ruleForm.secondPassword" placeholder="请输入确认密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt-20">
          <el-col :span="5">
            <el-form-item label=" 身份证照:" prop="idcardUrl">
              <el-upload class="f-img-uploader" :action="uploadForm.action" :headers="uploadForm.headers" :data="uploadForm.data"
                :show-file-list="false" :on-success="uploadSuccess">
                <img v-if="ruleForm.idcardUrl" :src="ruleForm.idcardUrl" class="f-img" />
                <img v-else src="@/assets/imgs/id_photo01.png" alt="" class="f-img">
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="营业执照:" prop="licenseUrl">
              <el-upload class="f-img-uploader" :action="uploadForm.action" :headers="uploadForm.headers" :data="uploadForm.data"
                :show-file-list="false" :on-success="uploadSuccess1">
                <img v-if="ruleForm.licenseUrl" :src="ruleForm.licenseUrl" class="f-img" />
                <img v-else src="@/assets/imgs/id_photo06.png" alt="" class="f-img">
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </section>
  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import api from './api.js'
import { warningDeal, getDateTime, successDeal, BlobDownLoad, getStore, errorDeal } from '@/utils/utils'
import hexMD5 from "@/utils/md5.min.js"

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: {}
    }
  },

  emits: ["cancelEdit", "setModify"],

  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const ruleFormRef = ref(null)

    const state = reactive({
      ruleForm: {},
      rules: {
        shopName: [
          { required: true, message: "请输入商户名称", trigger: "blur" },
        ],
        shopUserName: [
          { required: true, message: "请输入店铺联系人姓名", trigger: "blur" },
        ],
        shopUserPhone: [
          { required: true, message: "请输入店铺联系人电话", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入登录号码", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
        ],
        firstPassword: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
        secondPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],
        idcardUrl: [
          { required: true, message: '请选择身份证照', trigger: 'change' }
        ],
        licenseUrl: [
          { required: true, message: '请选择营业执照', trigger: 'change' }
        ],
      },

      uploadForm: {
        action: '/ums/file/upload/img',
        headers: {
          Authorization: getStore('USER_AUTHOR_INRE').Authorization || `'','','',3,20,''`,
          Token: `Bearer ${window.localStorage.getItem("USER_TOKEN_INRE")}`,
          platformHeadType: 'rcmsPlatform'
        },
        data: {}
      },
    })

    onMounted(() => {
      if (props.isEdit) {
        state.ruleForm = JSON.parse(JSON.stringify(props.formData))
        state.ruleForm.shopUserPhone = state.ruleForm.contactsPhone
        state.ruleForm.shopUserName = state.ruleForm.contactsName
      }
    })

    function submitHandle(type) {
      ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          let json = JSON.parse(JSON.stringify(state.ruleForm))
          json.firstPassword = hexMD5(json.firstPassword)
          json.secondPassword = hexMD5(json.secondPassword)
          if (type == 'add') {
            api.shopCreate(json).then(res => {
              successDeal('新增成功！')
              setTimeout(() => {
                router.go(-1)
              }, 500)
            })
          } else if (type == 'modify') {
            api.shopModify(json).then(res => {
              successDeal('编辑成功！')
              context.emit('setModify')
            })
          }
        }
      })
    }

    const cancelEdit = () => {
      context.emit('cancelEdit')
    }

    const uploadSuccess = (res) => {
      if (res.code == '200') {
        state.ruleForm.idcardUrl = res.data.ossUrl
        ruleFormRef.value.validate()
      } else {
        errorDeal(res.msg)
      }
    }
    const uploadSuccess1 = (res) => {
      if (res.code == '200') {
        state.ruleForm.licenseUrl = res.data.ossUrl
        ruleFormRef.value.validate()
      } else {
        errorDeal(res.msg)
      }
    }

    return {
      ...toRefs(state),
      ruleFormRef,
      submitHandle,
      cancelEdit,
      uploadSuccess,
      uploadSuccess1
    }
  }
}
</script>
  
<style lang='scss' scoped>
.f-shop-add {
  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  > .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-content {
    padding-left: 5px;
    .f-title {
      font-weight: bold;
      font-size: 15px;
      color: #000000;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .f-tips {
        color: #f73e3e;
        font-size: 12px;
        font-weight: 500;
        margin-left: 40px;
      }
    }
    .f-tabel {
      border: 1px solid #acacac;
      width: 800px;
    }
    .f-guige-box {
      font-size: 14px;
      color: #404040;
      background: #eef2f4;
      display: flex;
      align-items: center;
      padding: 16px 10px;
      margin-top: 20px;
    }
  }
  .f-divider {
    height: 1px;
    border-top: 1px dashed #aaaaaa;
    margin: 32px 0 27px 0;
  }
}
</style>
  
<style>
.f-img-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.f-img-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.f-img {
  width: 250px;
  height: 150px;
}
</style>